<template>
  <ScrollContainer :style="{ height: scrollerHeight + 'px' }" class="diy-p5" ref="wrapperRef">
    <div class="diy-setting-header">
      <Tooltip
        class="diy-setting-header-left"
        v-if="designer?.selectedWidget"
        placement="bottomLeft"
        :title="t(`designer.widgetLabel.${designer.selectedWidget.type}`)"
      >
        {{ t(`designer.widgetLabel.${designer.selectedWidget.type}`) }}
      </Tooltip>

      <RadioGroup class="diy-setting-header-right" v-model:value="state.activeKey" button-style="solid">
        <RadioButton value="comp">组件</RadioButton>
        <RadioButton value="form">表单</RadioButton>
      </RadioGroup>
    </div>
    <Divider style="margin: 10px 0px 5px 0px" />

    <div class="indent-left-margin">
      <!-- 根据类型分组, 有多少个分组, 头部就会展示多少个按钮 -->
      <template v-for="(propsTypeGroup, key) in propertyGroup(widgetPropsRegister, 'type')" :key="key">
        <template v-if="state.activeKey === 'comp' && !!designer?.selectedWidget && `${key}` === 'comp'">
          <Form :model="optionModel" class="diy-setting-form" layout="vertical">
            <Collapse v-model:active-key="state.activeCollapseKey" ghost>
              <!-- 通过标签进行分组 -->
              <template v-for="(propsTagGroup, key, index) in propertyGroup(propsTypeGroup, 'tag')" :key="index">
                <!-- 按照标签分组展示属性 -->
                <template v-for="registeProps in propsTagGroup" :key="registeProps.tag">
                  <CollapsePanel
                    :key="registeProps.tag"
                    :header="registeProps.tag"
                    v-if="isShowPanel(registeProps)"
                    class="diy-setting-collapse-panel"
                  >
                    <template v-for="(editorConfig, propName, index) in registeProps.props" :key="index">
                      <component
                        v-if="hasPropEditor(propName, editorConfig.editor)"
                        :is="getPropEditor(propName, editorConfig.editor)"
                        :designer="designer"
                        :selected-widget="selectedWidget"
                        v-model:value="selectedWidget.props[propName]"
                        :optionModel="optionModel"
                        :editorProps="editorConfig.editorProps || {}"
                        :propName="propName"
                      />
                    </template>
                  </CollapsePanel>
                </template>
              </template>
            </Collapse>
          </Form>
        </template>

        <template v-if="state.activeKey === 'form' && `${key}` === 'form'">
          <FormSetting :scrollerHeight="scrollerHeight" :designer="designer" :propsRegisted="propertyGroup(propsTypeGroup, 'tag')" />
        </template>
      </template>
    </div>
  </ScrollContainer>
</template>
<script lang="ts" name="diy-props-setting-panel" setup>
  import { ref, getCurrentInstance, computed, onMounted, nextTick, watch, provide } from "vue"
  import type { CSSProperties } from "vue"
  import { useDrawer } from "/@/components/Drawer"
  import widgetPropsRegister from "./propertyRegister"
  import { propertyRegistered, propertyGroup } from "./propertyRegister"
  import type { Designer } from "../../type"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useGlobSetting } from "/@/hooks/setting"
  import { ScrollContainer } from "/@/components/Container"
  import { Collapse, CollapsePanel, RadioGroup, RadioButton, Divider, Tooltip, Form } from "ant-design-vue"
  import useSetting from "./useSetting"
  import FormSetting from "./FormSetting.vue"
  const { t } = useI18n("diyForm")
  const state = ref({
    activeKey: "comp",
    activeCollapseKey: "基础",
  })

  const props = defineProps({
    scrollerHeight: { type: Number },
    designer: { type: Object as () => Designer },
  })
  const selectedWidget = ref<any>({})
  const settingForm = ref<any>({
    layout: "vertical",
    labelWidth: "95px",
    labelAlign: "left",
  })
  const { isShowPanel, hasPropEditor, getPropEditor, updateFormItemConfig } = useSetting(selectedWidget, props)
  // provide('designerConfig', props.designerConfig);

  const wrapperRef = ref<any>()
  const optionModel = ref<any>()

  watch(
    () => props.designer?.selectedWidget,
    async (val: any) => {
      selectedWidget.value = val || {}
      selectedWidget.value.settingForm = settingForm.value
      optionModel.value = selectedWidget.value?.props || {}
      // optionModel.value = selectedWidget.value?.props
    },
    {
      deep: true,
      immediate: true,
    }
  )

  onMounted(() => {
    updateFormItemConfig(props.designer)
  })
</script>

<style lang="less">
  @import "../index.less";

  .diy-setting-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    &-left {
      font-size: 18px;
      color: @text-color;
      margin-right: auto;

      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &-right {
    }
  }

  .diy-setting-form {
    .ant-form-item-label label {
      font-size: 13px;
      //text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .ant-form-item {
      margin-bottom: 10px !important;
    }
  }

  .diy-setting-collapse-panel {
    .ant-collapse-header {
      margin-bottom: -10px !important;
    }
  }
</style>
